<template>
  <el-dialog title="进出洞详情" :visible.sync="dialogVisible" width="70%" :close-on-click-modal="false" :before-close="handleClose">
    <div>
      <ul v-if="!carFlag" class="oneUl">
        <li>
          <span>员工姓名:</span>
          <span>{{ recordData.name }}</span>
        </li>
        <li>
          <span>RFID:</span>
          <span>{{ recordData.rfid }}</span>
        </li>
        <li>
          <span>门禁ID:</span>
          <span>{{ recordData.accessCardID }}</span>
        </li>
      </ul>
      <ul v-else class="oneUl">
        <li>
          <span>车辆类型:</span>
          <span>{{ recordData.carType }}</span>
        </li>
        <li>
          <span>车辆RFID:</span>
          <span>{{ recordData.rfid }}</span>
        </li>
        <li>
          <span>车牌号:</span>
          <span>{{ recordData.plateNumber }}</span>
        </li>
      </ul>
      <ul v-if="!carFlag" class="twoUl">
        <li>
          <span>部门:</span>
          <span>{{ recordData.department }}</span>
        </li>
        <li>
          <span>职务:</span>
          <span>{{ recordData.job }}</span>
        </li>
        <li>
          <span>工种:</span>
          <span>{{ recordData.work }}</span>
        </li>
      </ul>
      <ul v-else class="twoUl">
        <li>
          <span>负责人:</span>
          <span>{{ recordData.responsibleMan }}</span>
        </li>
        <li>
          <span>负责人联系方式:</span>
          <span>{{ recordData.responsiblePhone }}</span>
        </li>
        <li></li>
      </ul>
    </div>
    <ListTable ref="RefTableList" :page="true" :loading="tableLoading" :table-data="tableData" :table-col="tableCol"></ListTable>
  </el-dialog>
</template>

<script>
  import dialogEditMixin from '@/mixins/dialogEdit'
  import { eleValidator } from '@/utils/tools'
  import listMixin from '@/mixins/list'
  import { parseTime } from '@/utils'
  export default {
    mixins: [dialogEditMixin, listMixin],
    data() {
      return {
        carFlag: false,
        tableLoading: false,
        // 人员信息
        recordData: {
          name: '',
          RFID: '',
          accessCardID: '',
          department: '',
          job: '',
          work: ''
        },
        tableData: [],
        tableCol: [
          { prop: 'baseStation.area.name', label: '所在区域' },
          { prop: 'baseStation.name', label: '基站名称' },
          {
            prop: 'baseStation.updatedTime', label: '上传时间',
            formatter(row, col, cell) {
              return parseTime(new Date(row.baseStation.updatedTime).getTime())
            }
          },
          {
            prop: 'baseStation.createdTime', label: '进入隧道时间',
            formatter(row, col, cell) {
              return parseTime(new Date(row.baseStation.createdTime).getTime())
            }
          },
          {
            prop: 'baseStation.updatedTime', label: '更新时间',
            formatter(row, col, cell) {
              return parseTime(new Date(row.baseStation.updatedTime).getTime())
            }
          }
        ],
        apiKey: {
          search: '/Path/Search',
          add: '/Path',
          put: '/Path/'
        }
      }
    },
    watch: {
      searchValue: function (newValue, oldValue) {
        console.log(newValue)
        if (!newValue.data) { return }
        // 人员信息
        const { data: { items: resData, count, pageIndex } } = newValue
        if (resData.length > 0) {
          if (resData[0].employeeId) {
            this.carFlag = false
            let people = resData[0].employee
            this.recordData = {
              name: people.name,
              rfid: people.rfid,
              accessCardID: people.accessCardID,
              department: people.department ? people.department.deptName : '--',
              job: people.job ? people.job.jobTitle : '--',
              work: people.work ? people.work.workName : '--'
            }
            this.tableData = resData.map(item => {
              item.loadingEdit = false
              item.loadingDel = false
              return item
            })
            this.$nextTick(() => {
              this.$refs.RefTableList.update({ page: pageIndex, count })
              this.tableLoading = false
            })
          } else {
            this.carFlag = true
            let car = resData[0].car
            this.recordData = {
              carType: car.carType,
              rfid: car.rfid,
              plateNumber: car.plateNumber,

              responsibleMan: car.responsibleMan,
              responsiblePhone: car.responsiblePhone
            }
            this.tableData = resData.map(item => {
              item.loadingEdit = false
              item.loadingDel = false
              return item
            })
            this.$nextTick(() => {
              this.$refs.RefTableList.update({ page: pageIndex, count })
              this.tableLoading = false
            })
          }
        }
      }
    },
    methods: {
      resetFormData() {
        this.recordData = {
          name: '',
          RFID: '',
          accessCardID: '',
          department: '',
          job: '',
          work: ''
        }
      },
      handleClose() {
        this.tableData = []
        this.close()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .oneUl,
  .twoUl {
    margin: 0;
    padding: 0;
    display: flex;
    li {
      flex: 1;
      list-style: none;
    }
  }
  .twoUl {
    margin-top: 10px;
  }
</style>
